<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>酒店管理</title>
    <link href="./css/main.css" rel="stylesheet">
    <!-- 引入样式 -->
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">


</head>
<body>
<div id="app">
    <h1>酒店数据管理</h1>
    <div class="add-btn">
        <el-button @click="beginAdd" class="new-add" size="small" type="primary">新增酒店</el-button>
        <!-- 搜索与添加区域 -->
        <div>
            <el-input @clear="query(1)" @keyup.enter.native="query(1)" class="input-with-select" clearable
                      placeholder="请输入内容"
                      v-model="queryInfo.query">
                <el-button @click="query(1)" icon="el-icon-search" slot="append"></el-button>
            </el-input>
        </div>
    </div>


    <el-table
            :data="hotels"
            border
            style="width: 100%">
        <el-table-column
                :align="h.align" :key="h.prop"
                :label="h.text"
                :prop="h.prop"
                :width="h.width"
                v-for="h in headers"
        >
        </el-table-column>
        <el-table-column :width="150" align="center" label="操作">
            <template slot-scope="scope">
                <!-- 修改的话, 直接把这个行的 index, 和 一行的数据发过去了, 并没有调用后台的queryById查询 -->
                <el-button @click="handleEdit(scope.$index, scope.row)" circle icon="el-icon-edit" plain size="mini"
                           type="primary"></el-button>
                <el-button @click="handleDelete(scope.$index, scope.row)" circle icon="el-icon-delete" plain size="mini"
                           type="danger"></el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            :current-page="queryInfo.page"
            :page-size="queryInfo.size"
            :total="total"
            @current-change="handleCurrentChange"
            background
            layout="prev, pager, next"
            style="margin-top: 5px">
    </el-pagination>
    <el-dialog :visible.sync="formVisible" style="padding: 0 20px;" title="酒店信息" width="30%">
        <el-form :label-width="formLabelWidth" :model="hotel" label-position="left" size="small">
            <el-form-item label="酒店名称">
                <el-input autocomplete="off" v-model="hotel.name"></el-input>
            </el-form-item>
            <el-form-item label="酒店地址">
                <el-input autocomplete="off" v-model="hotel.address"></el-input>
            </el-form-item>
            <el-form-item label="酒店价格">
                <el-input autocomplete="off" v-model="hotel.price"></el-input>
            </el-form-item>
            <el-form-item label="酒店评分">
                <el-input autocomplete="off" v-model="hotel.score"></el-input>
            </el-form-item>
            <el-form-item label="酒店品牌">
                <el-input autocomplete="off" v-model="hotel.brand"></el-input>
            </el-form-item>
            <el-form-item label="所在城市">
                <el-input autocomplete="off" v-model="hotel.city"></el-input>
            </el-form-item>
            <el-form-item label="所在商圈">
                <el-input autocomplete="off" v-model="hotel.business"></el-input>
            </el-form-item>
            <el-form-item label="酒店图片">
                <el-input autocomplete="off" v-model="hotel.pic"></el-input>
            </el-form-item>
            <el-form-item label="酒店纬度">
                <el-input autocomplete="off" v-model="hotel.latitude"></el-input>
            </el-form-item>
            <el-form-item label="酒店经度">
                <el-input autocomplete="off" v-model="hotel.longitude"></el-input>
            </el-form-item>
            <el-form-item label="星级">
                <el-select placeholder="请选择酒店星级" style="width: 263px" v-model="hotel.starName">
                    <el-option label="一星级" value="一星级"></el-option>
                    <el-option label="二星级" value="二星级"></el-option>
                    <el-option label="三星级" value="三星级"></el-option>
                    <el-option label="四星级" value="四星级"></el-option>
                    <el-option label="五星级" value="五星级"></el-option>
                    <el-option label="一钻" value="一钻"></el-option>
                    <el-option label="两钻" value="两钻"></el-option>
                    <el-option label="三钻" value="三钻"></el-option>
                    <el-option label="四钻" value="四钻"></el-option>
                    <el-option label="五钻" value="五钻"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div class="dialog-footer" slot="footer">
            <el-button @click="formVisible = false">取 消</el-button>
            <el-button @click="confirmEdit" type="primary">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    // 设置后台服务地址
    axios.defaults.baseURL = "http://localhost:8099";
    axios.defaults.timeout = 3000;

    const app = new Vue({
        el: "#app",
        data: {
            headers: [
                {prop: "id", text: "ID", width: 120, align: "center"},
                {prop: "name", text: "酒店名称", width: 0, align: "center"},
                {prop: "brand", text: "酒店品牌", width: 120, align: "center"},
                {prop: "price", text: "酒店价格", width: 120, align: "center"},
                {prop: "business", text: "所在商圈", width: 220, align: "center"}
            ],
            hotels: [],
            total: 1000,
            formVisible: false, // 是否显示表单
            formLabelWidth: "100px", // 表单label宽度
            hotel: {}, // 表单中的酒店数据
            isEdit: false, // 是否是更新
            lastPage: 1,// 上一次查询的页码
            queryInfo: {  // 查询列表参数
                query: '',
                page: 1,
                size: 5
            }
        },
        created() {
            this.query(1);
        },
        methods: {
            beginAdd() {
                this.isEdit = false;
                this.hotel = {};
                this.formVisible = true;
            },
            query(page) {
                this.lastPage = page;
                // todo
                this.queryInfo.page = page;
                axios.get("/hotel/list", {
                    params: this.queryInfo
                    // params: {
                    //     page: page, size: 5
                    // }
                })
                    .then(resp => {
                        this.hotels = resp.data.hotels;
                        this.total = resp.data.total;
                    })
                    .catch(err => console.log(err));
            },
            handleEdit(v1, v2) {
                this.isEdit = true;
                this.hotel = JSON.parse(JSON.stringify(v2));
                this.formVisible = true;
            },
            handleDelete(v1, v2) {
                this.$confirm('此操作将永久删除酒店信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteById(v2.id);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            confirmEdit() {
                if (this.isEdit) {
                    axios.put("/hotel", this.hotel)
                        .then(resp => {
                            this.$message({
                                message: '更新成功',
                                type: 'success'
                            });
                            this.formVisible = false;
                            this.reload();
                        })
                        .catch(err => {
                            this.$message({
                                message: '更新失败',
                                type: 'error'
                            });
                            console.log(err);
                        })
                } else {
                    axios.post("/hotel", this.hotel)
                        .then(resp => {
                            this.$message({
                                message: '新增成功',
                                type: 'success'
                            });
                            this.formVisible = false;
                            this.reload();
                        })
                        .catch(err => {
                            this.$message({
                                message: '新增失败',
                                type: 'error'
                            });
                            console.log(err);
                        })
                }

            },
            deleteById(id) {
                axios.delete("/hotel/" + id)
                    .then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.reload();
                    })
                    .catch(err => {
                        this.$message({
                            type: 'error',
                            message: '删除失败!'
                        });
                        console.log(err);
                    })
            },
            reload() {
                this.query(this.lastPage);
            },
            handleCurrentChange(newPage) {
                this.query(newPage);
            }
        }
    })
</script>
</body>
</html>